<template>
	<view>
		<tui-bottom-popup :show="show" @close="onClose">
			<view class="tui-popup-box">
				<view class="tui-popup-title">配送方式</view>
				<view class="tui-popup-methods">
					<view
						class="tui-methods-item"
						:class="{'tui-methods-item-actived': item.code === selectedDeliveryMethod}"
						v-for="item in DeliveryMethods"
						@click="selectedDeliveryMethod = item.code"
						:key="item.code">
						{{item.display}}
					</view>
				</view>
				<view class="tui-right">
					<tui-icon name="close-fill" color="#999" :size="20" @click="onClose"></tui-icon>
				</view>
				<view class="tui-popup-methods-bottom">
					<tui-button height="72rpx" :size="28" type="danger" shape="circle" @click="onConfirm">确定</tui-button>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import { DeliveryMethods } from '@/constants/index.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				DeliveryMethods,
				selectedDeliveryMethod: -1
			};
		},
		filters: {
			deliveryMethod(value) {
				const ret = DeliveryMethods.find(item => item.code == value)
				return ret ? ret.display : '请选择'
			}
		},
		methods: {
			onClose() {
				this.$emit('close')
			},
			deliveryMethod() {
				const ret = DeliveryMethods.find(item => item.code == this.selectedDeliveryMethod)
				return ret ? ret.display : '请选择'
			},
			onConfirm() {
				this.$emit('selected', {
					txt: this.deliveryMethod(),
					code: this.selectedDeliveryMethod
				})
			}
		}
	}
</script>

<style lang="scss">
.tui-popup-box {
	position: relative;
	padding: 30rpx 0 0 0;
}

.tui-right {
	position: absolute;
	right: 30rpx;
	top: 30rpx;
}

.tui-popup-title {
	padding-left: 30rpx;
	color: #333;
	font-weight: bold;
}

.tui-popup-methods {
	padding: 30rpx;
	min-height: 300rpx;
}

.tui-methods-item {
	max-width: 100%;
	min-width: 200rpx;
	height: 64rpx;
	display: -webkit-inline-flex;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f7f7f7;
	padding: 0 26rpx;
	box-sizing: border-box;
	border-radius: 32rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	font-size: 26rpx;
}

.tui-methods-item-actived {
	background: #fcedea !important;
	color: #e41f19;
	font-weight: bold;
	position: relative;
}

.tui-popup-methods-bottom {
	padding: 10rpx 30rpx;
}
</style>
